<template>
  <div className="type_6-outer flex">
    <img :src="config_data.head_img || 'http://taiyushangdao-saas.oss-cn-chengdu.aliyuncs.com/uploads/2023/0816/145725857517.png'" draggable="false">
    <ul className="max">
      <li v-for="row in list">{{ row.title }}</li>
    </ul>
    <span style="color: var(--el-color-primary)">更多</span>
  </div>
</template>

<script>
import Conveyer from "@/assets/Conveyer.es6.js";

export default {
  name: "type_6",
  props: ['title', 'list', 'config', 'model_id', 'table_name', 'href'],
  data() {
    return {}
  },
  methods: {},
  computed: {
    config_data() {
      try {
        return this.config ? JSON.parse(this.config) : {};
      } catch (e) {
        return {};
      }
    },
  },
  mounted() {
    let app = this;
    //渲染完成执行
    let speed = this.config_data.speed || 1.5;

    let outer = this.$el.querySelector('ul');
    let lis = outer.querySelectorAll('li');
    if (lis.length >= 1){
      app.conveyer = new Conveyer(outer);
      setTimeout(function (){
        app.$el.style.setProperty("--speed", speed+'s');
        app.conveyer.next();
        setInterval(function () {
          app.conveyer.next()
        }, speed*1000);
      },100)
    }
  }
}
</script>

<style scoped>
.type_6-outer{padding: 8px;--speed:0s;}
.type_6-outer>img{height: 20px;}
.type_6-outer>ul{height: 1.5em;position: relative;overflow: hidden;margin: 0 8px;}
.type_6-outer>ul>li{list-style: none; background: var(--bg);width: 100%;height: 100%;position: absolute;top: 0;left: 0;transition: left var(--speed) linear;}
.type_6-outer>ul>li.conveyer-head{left: -100%;}
.type_6-outer>ul>li.conveyer-tail{left: 100%;}

</style>